<template>
	<view class="content">
		<!-- <view class="example-body">
			<uni-steps :options="list" active-color="#8AB46C" :active='1' />
		</view> -->
		<view class="common_info" style="margin-top: 100upx;">近期一寸免冠照片</view>
		<view class="memo">照片非必传，是否需要由应征地兵役机关决定</view>
		<view class="verify">
			<view class="photo">
				<!-- <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera> -->
				<image style="width: 358upx;height: 441upx;" :src=" upLoadPhoto || noPhoto" @click="getPhoto"></image>
				<!-- <robby-image-upload v-model="imageUrlList" fileKeyName="files" :header="header" :formData="formData"
					:server-url="uploadUrl" :showUploadProgress="true" limit="1" style="position: absolute;">
				</robby-image-upload> -->
			</view>
			<view class="directions">本人近期一寸正面免冠彩色头像照片（参照居民身份证照片样式），规格358像素（宽）×441像素（高），
				分辨率350dpi。颜色模式24位RGB真彩色；格式JPG或JEPG，大小20K——100K；照片背景为单色（白色、蓝色、红色均可），
				要求人像清晰，神态自然，无明显畸变。</view>
		</view>
		<!-- 		<view class="btnAll">
			<button class="btnConfirm" @click="upLoadBack">确定</button>
			<button class="btnCancle" @click="cancle">取消</button>
		</view> -->
		<view class="common_info" style="width: 160upx;">参军信息</view>
		<!-- 应征地多项选择差一个选项 -->
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>选择应征地
			</view>
			<!-- 	<picker mode="region" :value="userInfo.inputRegion" @change="bindRegionChange">
				<view class="picker_class">{{userInfo.inputRegion || "请选择应征地"}}</view>
			</picker> -->
			<view class="picker_class" @click="showSource">{{userInfo.inputRegion || "请选择应征地"}}</view>
		</view>
		<view class="hint_text">应征地是指进行兵役登记后参加体检、政审及批准入伍的地点；应征地应当是常住户籍所在地，
			高校在校生和应届毕业生的应征地也可以选择高校所在地</view>
		<view class="group_item">
			<view class="group_title" style="width: 140upx;">
				参军意愿1
			</view>
			<picker @change="bindWillChange" :range="willList" :value="userInfo.inputWill">
				<view class="picker_class">{{userInfo.inputWill || "请输入"}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 140upx;">
				参军意愿2
			</view>
			<picker @change="bindWillChange1" :range="willList1" :value="userInfo.inputWill1">
				<view class="picker_class">{{userInfo.inputWill1 || "请输入"}}</view>
			</picker>
		</view>
		<!-- 应征条件具体未知 -->
		<!-- 		<view class="group_item">
			<view class="group_title" style="width: 450upx;">
				<span style="color: red;">*</span>是否符合应征条件
			</view>
			<view class="picker_class">
				<radio-group @change="handleCensusChange" v-model="userInfo.inputeCensus">
					<label class="radio">
						<radio value="0" checked="true" style="transform: scale(0.6);" />我符合
					</label>
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);margin-left:10upx" />我不符合
					</label>
				</radio-group>
			</view>
		</view> -->
		<view style="display: flex;justify-content: space-between;width: 100%;">
			<button type="primary" class="button_class1" @click="foreStep">上一步</button>
			<button type="primary" class="button_class1" @click="addUserInfo">保存</button>
		</view>
		<wPicker mode="region" @confirm="confirm" ref="region" themeColor="#f00" :defaultVal="defaultValue" :hideArea="false"></wPicker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		data() {
			return {
				baseUrl: this.$api.request.apiBaseUrl,
				list: [{
					title: '基本信息',
				}, {
					title: '附加信息',
				}],
				noPhoto: '/static/image/face/default.png',
				upLoadPhoto: '',
				userInfo: {
					inputRegion: "",
					inputWill: "",
					inputWill1: "",
					// inputeCensus: ''
				},
				willList: [
					"陆军", "海军", "空军", "二炮", "武警", "艰苦地区部队"
				],
				willList1: [
					"陆军", "海军", "空军", "二炮", "武警", "艰苦地区部队"
				],
				defaultValue: ["四川省", "成都市", "武侯区"],
				src: "",
				userId: ""
			}
		},
		components: {
			wPicker
		},
		mounted() {
			let userInfo = uni.getStorageSync("userInfo")
			console.log(userInfo)
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
		},

		methods: {
			showSource() {
				this.$refs['region'].show();
			},
			confirm(e) {
				this.userInfo.inputRegion = e.result
			},
			foreStep() {
				this.$parent.foreStep()
			},
			getPhoto() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '上传中'
						});
						let tempFilePaths = res.tempFilePaths
						console.log(tempFilePaths)
						uni.uploadFile({
							url: that.baseUrl + 'uploadMediaFile',
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'file',
							success: (uploadFileRes) => {
								let response = JSON.parse(uploadFileRes.data)
								if (response.errno == 0) {
									that.upLoadPhoto = response.data[0]
								} else {
									that.$api.msg("上传失败")
								}
							},
							fail: (error) => {
								if (error && error.response) {
									that.$api.msg(error.response)
								}
							},
							complete: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 250);
							},
						});

					}
				})
			},
			addUserInfo() {
				if (this.userInfo.inputRegion === "") {
					uni.showToast({
						title: '请选择应征地',
						icon: 'none',
						duration: 2000
					});
					return
				}
				console.log(this.$parent.$parent)
				let landAcquisition = this.userInfo.inputRegion
				let userInfo = this.$parent.$parent.userInfo;
				let params = {
					"name": userInfo.inputName,
					"sex": userInfo.inputSex,
					"idCard": userInfo.inputIdCard,
					"birthdayTime": userInfo.inputBirthday,
					"politicalOutlook": userInfo.inputPolitic,
					"householdAddress": userInfo.inputRegion,
					"education": userInfo.inputEducation,
					"graduateSchool": userInfo.inputSchName,
					"major": userInfo.inputMajor,
					"phone": userInfo.inputPhone,
					"address": userInfo.inputAddress,
					"photoUrl": this.upLoadPhoto,
					"enlistAddress": landAcquisition,
					"volunteerFirst": this.userInfo.inputWill,
					"volunteerSecond": this.userInfo.inputWill1,
					"activityId": this.$parent.$parent.activityId,
					"userId": this.userId
				}
				this.$api.request.enrollActivity(params, (res) => {
					if (res.body.status.statusCode == "0") {
						uni.navigateBack()
						uni.showToast({
							title: '报名成功，请等待审核',
							icon: 'none'
						})
					}
				})

			},
			bindRegionChange(e) {
				this.userInfo.inputRegion = e.detail.value
			},
			bindWillChange(e) {
				this.userInfo.inputWill = this.willList[e.detail.value]
			},
			bindWillChange1(e) {
				this.userInfo.inputWill1 = this.willList1[e.detail.value]
			},
			handleCensusChange(e) {
				console.log(e)
				this.userInfo.inputeCensus = e.detail.value
			}

		}
	}
</script>

<style>
	page {
		background: #FBFBFB;
	}

	.content {
		overflow: auto;
		/* padding: 70upx; */
		padding-top: 0upx;
	}

	.example-body {
		position: fixed;
		width: 100%;
		padding: 16upx 0 16upx 0;
		font-size: 30upx;
		background-color: #fbfbfb;
		z-index: 99;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.common_info {
		/* margin-bottom: 16upx; */
		color: #fff;
		font-weight: bold;
		background: #8AB46C;
		width: 300upx;
		/* height: 50upx; */
		text-align: center;
		line-height: 60upx;
		font-size: 30upx;
		/* letter-spacing: 4upx; */
		border-radius: 0 30upx 30upx 0;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 180upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.button_class1 {
		/* position: fixed; */
		/* bottom: 40upx; */
		margin-top: 20upx;
		margin-bottom: 40upx;
		width: 40%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #8AB46C !important;
		color: white
	}

	.hint_text {
		color: #999;
		padding: 0 30upx;
		font-size: 24upx;
	}

	.title {
		font-size: 48upx;
		margin-bottom: 16upx;
		/* background: #00AA00; */
	}

	.memo {
		padding: 16upx 30upx 0 30upx;
		font-size: 24upx;
		color: #999999;
	}

	.photo {
		width: 358upx;
		height: 441upx;
		margin: 60upx auto 32upx auto;
		background: url('/static/image/face/defaultBorder.png') no-repeat;
		background-size: 358upx 441upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.directions {
		padding: 0 30upx 20upx 30upx;
		font-size: 28upx;
		color: #666;
	}
</style>
